<template>
    <div class="func-box">
        <div class="func-list">
            <div class="item" v-for="item in func_list" :key="item.id">
                <div class="icon" :style="`
                    --icon: url(${ base_url }${ item.icon });
                    --icon-size: ${ item.size };
                    `"></div>
                <div class="text">{{ item.text }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { base_url } from '@/server/config';

let func_list = ref([
    {
        id: 1,
        text: '最近播放',
        icon: '/static/icon/recently-played.svg',
        size: '60%'
    },
    {
        id: 2,
        text: '收藏歌单',
        icon: '/static/icon/collect-music.svg',
        size: '60%'
    },
    {
        id: 3,
        text: '喜欢歌曲',
        icon: '/static/icon/like-music.svg',
        size: '70%'
    }
]);
</script>

<style scoped lang="less">
.func-box {
    box-sizing: border-box;
    width: 100%;
    background-color: #fff;
    border-radius: 3vw;
    padding: 3vw;

    .func-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 2vw;
        width: 78vw;
        margin: 0 auto;

        .item {
            width: 18vw;

            .icon {
                --size: 10vw;
                width: var(--size);
                height: var(--size);
                margin: 0 auto;
            }

            .text {
                font-size: 3.5vw;
                color: #333;
                text-align: center;
            }
        }
    }
}
</style>
